//
// Forms
// --------------------------------------------------

input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
select,
textarea {
  &:extend(.form-control all);
  display: inline-block;
  max-width: 100%; /* Prevent resizing beyond the visible area in modern browsers */
  width: auto;
}

select.input-sm, input[type="text"].input-sm, input[type="password"].input-sm {
  .input-sm;
}

select.input-lg, input[type="text"].input-lg, input[type="password"].input-lg {
  .input-lg;
}

input[type="radio"],
input[type="checkbox"] {
  display: inline-block;
  margin-right: (@padding-base-horizontal / 2);
}

input[type="checkbox"] {
  vertical-align: middle;
  position: relative;
  margin: 0 4px 0 0;
  bottom: 1px;
}

textarea {
  height: auto;
  font-family: @font-family-monospace;
}

input:invalid,
select:invalid,
textarea:invalid {
  @border-color: @state-danger-text;
  border-color: @border-color;
  // Redeclare so transitions work.
  .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));

  &:focus {
    border-color: darken(@border-color, 10%);
    @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@border-color, 20%);
    .box-shadow(@shadow);
  }
}

.placeholder(@color: @text-muted);

/* For browsers that don't support the placeholder attribute. */
input[type="text"].empty {
  .text-muted;
}

/* Overrides Bootstrap generic select[size] selector, since it should be applied only for size>1 */
select[size="0"], select[size="1"] {
  height: @input-height-base;
}

.xform {

  input[type="color"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  select,
  textarea {
    width: 100%;
  }

  dl {
    dt {
      margin-top: floor(@font-size-base * 1.4);
      position: relative;
      &:first-of-type {
        margin-top: 0;
      }
      .label {
        color: @text-color;
        font-size: 1em;
        font-weight: ~"var(--font-weight-semibold)";
        margin-bottom: 0.3em;
        .buttonwrapper a {
          .btn-xs;
          margin: 0;
          position: absolute;
          right: 0;
          text-transform: none;
          top: 0;
        }
      }
      label {
        .label;
      }
    }
  }

  label {
    margin: 0;
    font-weight: normal;
  }
  .xRequired {
    margin-left: 1ex;
  }
  .xHint, .xRequired, .xErrorMsg {
    .text-muted-smaller;
    font-weight: ~"var(--font-weight-regular)";
    text-transform: none;
    margin-bottom: .5em;
  }
  .xHint {
    display: block;
  }
  .xErrorMsg {
    color: @state-danger-text;
  }
  .xErrorField {
    border-color: @state-danger-border;
  }
}

.xformInline {
  label {
    text-transform: uppercase;
    margin-right: 0.5em;
  }
  input[type="text"] {
    vertical-align: middle;
  }
}

.xwiki-form-listclass {
  display: block;
}

// Validation messages do not have the place to be displayed at the right of the input field, because the width of the fields is 100%.
.LV_validation_message {
  display: block;
}

// Forms on the navbar
@media screen and (max-width: @screen-xs-max) {
  .navbar-form {
    margin: 0 0;
  }
}

// Images inside input groups
.input-group img {
  max-width: inherit;
}

// Use color theme defined variables instead of a hard coded color for the bootstrap select
#xwikimaincontainer .bootstrap-select > .dropdown-toggle.bs-placeholder,
#xwikimaincontainer .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
#xwikimaincontainer .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
#xwikimaincontainer .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
  .text-muted;
}
